<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>APP</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
</head>
<body>
    <p class="aui-text-center">.aui-content 普通列表</p>
    <div class="aui-content">
        <ul class="aui-list-view">
            <li class="aui-list-view-cell">
                单行列表标题效果
            </li>
            <li class="aui-list-view-cell">
                单行列表标题效果
            </li>
            <li class="aui-list-view-cell">
                单行列表标题效果
            </li>
            <li class="aui-list-view-cell">
                单行列表标题效果
            </li>
            <li class="aui-list-view-cell">
                单行列表标题效果
            </li>
        </ul>
    </div>
    <p class="aui-text-center">新增 下划线缩进 15px .aui-in</p>
    <div class="aui-content">
        <ul class="aui-list-view aui-in">
            <li class="aui-list-view-cell">
                单行列表标题效果
            </li>
            <li class="aui-list-view-cell">
                单行列表标题效果
            </li>
        </ul>
    </div>
    <p class="aui-text-center">新增 i.aui-iconfont</p>
    <div class="aui-content">
        <ul class="aui-list-view aui-in">
            <li class="aui-list-view-cell">
                <i class="aui-iconfont aui-icon-edit aui-bg-info"></i>单行列表标题效果
            </li>
            <li class="aui-list-view-cell">
                <i class="aui-iconfont aui-icon-emoji aui-bg-success"></i>单行列表标题效果
            </li>
            <li class="aui-list-view-cell">
                <i class="aui-iconfont aui-icon-favor aui-bg-danger"></i>单行列表标题效果
            </li>
            <li class="aui-list-view-cell">
                <i class="aui-iconfont aui-icon-like aui-bg-warning"></i>单行列表标题效果
            </li>
            <li class="aui-list-view-cell">
                <i class="aui-iconfont aui-icon-shop aui-bg-success"></i>单行列表标题效果
            </li>
        </ul>
    </div>
    <p class="aui-text-center">一条数据列表效果</p>
    <div class="aui-content">
        <ul class="aui-list-view">
            <li class="aui-list-view-cell" data-win="list_arrow">
                单行列表标题效果
            </li>
        </ul>
    </div>
    <p class="aui-text-center">.aui-content-padded</p>
    <div class="aui-content-padded">
        <ul class="aui-list-view">
            <li class="aui-list-view-cell" data-win="list_arrow">
                卡片式单行列表标题效果
            </li>
            <li class="aui-list-view-cell" data-win="list_thumb">
                卡片式单行列表标题效果
            </li>
            <li class="aui-list-view-cell" data-win="list-image">
                卡片式单行列表标题效果
            </li>
        </ul>
    </div>
    <p class="aui-text-center">.aui-card 圆角卡片有边框</p>
    <div class="aui-card">
        <ul class="aui-list-view">
            <li class="aui-list-view-cell" data-win="list_arrow">
                卡片式单行列表标题效果
            </li>
            <li class="aui-list-view-cell" data-win="list_thumb">
                卡片式单行列表标题效果
            </li>
            <li class="aui-list-view-cell" data-win="list-image">
                卡片式单行列表标题效果
            </li>
        </ul>
    </div>
    <p class="aui-text-center">.aui-card .aui-noborder 圆角卡片无边框</p>
    <div class="aui-card aui-noborder">
        <ul class="aui-list-view">
            <li class="aui-list-view-cell" data-win="list_arrow">
                卡片式单行列表标题效果
            </li>
            <li class="aui-list-view-cell" data-win="list_thumb">
                卡片式单行列表标题效果
            </li>
            <li class="aui-list-view-cell" data-win="list-image">
                卡片式单行列表标题效果
            </li>
        </ul>
    </div>
</body>
<script type="text/javascript" src="../script/api.js" ></script>
</html>